import React, {Component} from 'react';
import quiz from './lib/quiz';

require('./css/frame.css');

const ABCD=['A','B','C','D'];
const getABCD= (ary)=>{
  let str='';
  ary.map( (item,i) =>{
    if(item === 1){
      str=str+ABCD[i];
    }
  })
  return str;
}
window.nextFlag=[0,0];
window.showQuiz=false;
const checkState=['check','check_r','check_w'];
const checkWord=['检查','正确','错误'];
export default class P32 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index:0,
      checkflag:{
        'L':0,
        'R':0,
      } ,
      flag: {
        'L':[0, 0, 0, 0],
        'R':[0, 0, 0, 0],
      },
      divflag:0
    };
    this.canNext=[0,0];
  }

  onCho(i,type) {
    let { flag, index} = this.state;

    let curIndex=(type==='L' ? index :index+1);
    if(quiz[curIndex].single === 'single'){
      flag[type] = [0, 0, 0, 0];
      flag[type][i] =1;
    }
    if(quiz[curIndex].single === 'mult'){
      flag[type][i] = (flag[type][i] === 0 ? 1 :0);
    }
    this.setState({flag})
  }

  onCheck(type) {
    let { flag, checkflag,index} = this.state;

    let answer=getABCD(flag[type]);
    let curIndex=(type==='L' ? index :index+1);

    if(answer === quiz[curIndex].ans){
      checkflag[type] =1;
      this.canNext[curIndex%2] =1;
      window.nextFlag[curIndex%2] =1;
    }else{
      checkflag[type] =2
    }
    this.setState({checkflag});
  }

  componentWillReceiveProps(nextProps) {
    if(this.state.divflag === 0) {
      this.setState({
        divflag:1,
        index:0
      });
      window.showQuiz=true;
    }
    if(this.state.divflag === 1) {
      this.setState({
        checkflag: {
          'L': 0,
          'R': 0,
        },
        flag: {
          'L': [0, 0, 0, 0],
          'R': [0, 0, 0, 0],
        },
        index:nextProps.quizIndex
      });
    }
    if(nextProps.quizIndex === 16){
      this.setState({
        divflag:2
      });
    }
  }

  render() {
    const { flag, checkflag,divflag,index} = this.state;
    return (
      <div id="page">
        <div className="content" id="box32">

          <h4 className="title">课程测试</h4>
          {divflag === 0 && <div id='qdiv0'>
            <div className='infodiv'>本课程我们学习了以下内容，你都记住了吗？</div>

            <img src={require('./img/32.jpg')} style={{marginTop: 50}}/>

            <ul style={{
              position: 'absolute',
              left: 60,
              top: 100,
              width: 280,
              lineHeight: 2
            }}>
              <li>供电方案、车载电网、联网功能</li>
              <li>防盗锁止系统和组件保护</li>
              <li>照明系统</li>
              <li>组合仪表</li>
              <li>舒适系统</li>
              <li>信息娱乐系统</li>
            </ul>
            <p id='beginQuiz' onClick={ ()=>{
              this.setState({divflag:1});
              window.showQuiz=true;
            }}>开始测试</p>
          </div>}

          {divflag === 1 && <div id='qdiv1'>
            <div className="ldiv">
              <p className="qword" id="qword0">{quiz[index].qwd}</p>
              <ul className="list">
                {quiz[index].word.map((item, i) => {
                  return (
                    <li key={i+'L'}>
                      <span className={flag['L'][i] === 0 ?'quizbtns_off':'quizbtns_on'}

                        onClick={this.onCho.bind(this, i, 'L')}></span>
                      <span>{item}</span>
                    </li>);
                })
                }
              </ul>
              <div className={checkState[checkflag['L']]}
                   onClick={this.onCheck.bind(this, 'L')}>{checkWord[checkflag['L']]}</div>
            </div>
            <div className="rdiv">
              <p className="qword" id="qword0">{quiz[index+1].qwd}</p>
              <ul className="list">
                {quiz[index+1].word.map((item, i) => {
                  return (
                    <li key={i+'R'}>
                      <span className={flag['R'][i] === 0 ?'quizbtns_off':'quizbtns_on'}

                            onClick={this.onCho.bind(this, i, 'R')}></span>
                      <span>{item}</span>
                    </li>);
                })
                }
              </ul>
              <div className={checkState[checkflag['R']]}
                   onClick={this.onCheck.bind(this, 'R')}>{checkWord[checkflag['R']]}</div>
            </div>
          </div>}

          {divflag === 2 && <div id='qdiv2'>
            <div className="result">
              <p>恭喜你，已成功完成课程学习！</p>
            </div>
          </div>}


        </div>
      </div>
    );
  }
}



